<template>
	<view class="home-menu-layout">
		<view class="home-menu-item" v-for="item in channelStore.homeMenuList" :key="item.type" @tap="didSelectMenuItem(item)">
			<image class="home-menu-item-icon" :src="item.icon" mode="aspectFit"></image>
			<text class="home-menu-item-title">{{item.title}}</text>
		</view>
	</view>
</template>

<script setup>
	import { ref, watch } from 'vue'
	import { useChannelStore } from '@/common/stores'
	const channelStore = useChannelStore()
	
	// 选择菜单项
	const didSelectMenuItem = (item)=>{
		console.log(item)
		if(item.type == 1){
			uni.navigateTo({
				url:'/pages/home/agent-manager/agent-manager'
			})
		}
		else if(item.type == 2){
			uni.navigateTo({
				url:'/pages/home/device-manager/device-manager'
			})
		}
		else if(item.type == 3){
			uni.navigateTo({
				url:'/pages/home/merchant-manager/merchant-manager'
			})
		}
		else if(item.type == 4){
			uni.navigateTo({
				url:'/pages/home/order-search/order-search'
			})
		}
		else if(item.type == 5){
			uni.navigateTo({
				url:'/pages/home/agent-manager/agent-list/agent-list?type=代理商报表'
			})
		}
		else if(item.type == 6){
			uni.navigateTo({
				url:'/pages/home/unactive-device/unactive-device'
			})
		}
		else if(item.type == 7){
			uni.navigateTo({
				url:'/pages/home/ranking/ranking'
			})
		}
		else if(item.type == 8){
			uni.navigateTo({
				url:'/pages/home/zy-tools/zy-tools'
			})
		}
		
	}
	
</script>

<style lang="scss" scoped>
	.home-menu-layout {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		row-gap: 30rpx;
		padding: 30rpx 0;

		.home-menu-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.home-menu-item-icon {
				width: 80rpx;
				height: 80rpx;
			}

			.home-menu-item-title {
				color: $xh-color-3;
				font-size: 28rpx;
			}
		}
	}
</style>